<template>
  <ScreenLayoutWithMenu title="数据可视化大屏 - 监控预警">
    <!-- KPI统计数据行 -->
    <div class="kpi-section">
      <KPICard label="完成率" value="157.41%" green />
      <KPICard label="毛利率" value="65.16%" orange />
      <KPICard label="到货及时率" value="61.38%" orange />
      <KPICard label="库存周转率" value="2.24" green />
      <KPICard label="库存覆盖天数" value="45.1" green />
    </div>

    <!-- 图表区域 -->
    <div class="screen-grid grid-2x2">
      <ChartCard title="销售目标达成预警" grid-area="a">
        <ECharts :option="salesTargetOption" />
      </ChartCard>
      <ChartCard title="库存周转不足预警" grid-area="b">
        <ECharts :option="inventoryTurnoverOption" />
      </ChartCard>
      <ChartCard title="供应商采购数量评级预警" grid-area="c">
        <ECharts :option="supplierRatingOption" />
      </ChartCard>
      <ChartCard title="订单运输状态监控" grid-area="d">
        <ECharts :option="orderShippingOption" />
      </ChartCard>
    </div>
  </ScreenLayoutWithMenu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ScreenLayoutWithMenu from '../components/ScreenLayoutWithMenu.vue'
import KPICard from '../components/KPICard.vue'
import ChartCard from '../components/ChartCard.vue'
import ECharts from '../components/ECharts.vue'
import * as echarts from 'echarts'
import './Screen.css'

const salesTargetOption = ref({})
const inventoryTurnoverOption = ref({})
const supplierRatingOption = ref({})
const orderShippingOption = ref({})

onMounted(() => {
  // 销售目标达成预警
  salesTargetOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'line' }
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '完成率',
      min: 100,
      max: 200,
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff', formatter: '{value}%' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    series: [
      {
        name: '销售目标达成',
        type: 'line',
        data: [181.63, 163.47, 199.79, 108.98, 145.30, 160.50, 236.13, 175.20, 182.30, 155.60, 170.80, 145.30],
        lineStyle: { color: '#36cfc9', width: 2 },
        itemStyle: { color: '#36cfc9' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
            { offset: 1, color: 'rgba(54, 207, 201, 0.05)' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#36cfc9',
          formatter: '{c}%'
        }
      }
    ]
  }

  // 库存周转不足预警
  inventoryTurnoverOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'line' }
    },
    grid: {
      left: '10%',
      right: '10%',
      top: '20%',
      bottom: '15%'
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    yAxis: {
      type: 'value',
      name: '周转率',
      min: 0,
      max: 0.2,
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    series: [
      {
        name: '库存周转率',
        type: 'line',
        data: [0.22, 0.18, 0.15, 0.12, 0.06, 0.10, 0.28, 0.20, 0.14, 0.16, 0.18, 0.17],
        lineStyle: { color: '#36cfc9', width: 2 },
        itemStyle: { color: '#36cfc9' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(54, 207, 201, 0.3)' },
            { offset: 1, color: 'rgba(54, 207, 201, 0.05)' }
          ])
        },
        label: {
          show: true,
          position: 'top',
          color: '#36cfc9'
        }
      }
    ]
  }

  // 供应商采购数量评级预警
  supplierRatingOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: { color: '#fff' },
      data: ['供应商评级 A', '供应商评级 C', '供应商评级 B']
    },
    series: [
      {
        name: '供应商评级',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#0a0e27',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}\n{c}\n({d}%)',
          color: '#fff'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 17398, name: '供应商评级 A', itemStyle: { color: '#1890ff' } },
          { value: 16092, name: '供应商评级 C', itemStyle: { color: '#36cfc9' } },
          { value: 17847, name: '供应商评级 B', itemStyle: { color: '#ff9800' } }
        ]
      }
    ]
  }

  // 订单运输状态监控
  orderShippingOption.value = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '20%',
      right: '10%',
      top: '10%',
      bottom: '15%'
    },
    xAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' },
      splitLine: { lineStyle: { color: 'rgba(24, 144, 255, 0.1)' } }
    },
    yAxis: {
      type: 'category',
      data: ['待发货', '已发货'],
      axisLine: { lineStyle: { color: '#1890ff' } },
      axisLabel: { color: '#fff' }
    },
    series: [
      {
        name: '订单数量',
        type: 'bar',
        data: [17398, 25368],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#36cfc9' },
            { offset: 1, color: '#52c41a' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff'
        }
      }
    ]
  }
})
</script>

